<template>
  <div class="goods-item" @click="goDetail">
    <img v-lazy="images[goodsItem.image]" alt="" @load="imageLoad">
    <div class="info">
      <p class="title">{{goodsItem.title}}</p>
      <p class="desc">
        <span class="price">￥<em>{{goodsItem.price}}</em></span>
        <span class="sel">{{goodsItem.sel}}人付款</span>
      </p>
    </div>
  </div>
</template>
<script>
import img0 from 'assets/img/1.jpg'
import img1 from 'assets/img/2.jpg'
import img2 from 'assets/img/3.jpg'
import img3 from 'assets/img/4.jpg'
import img4 from 'assets/img/5.jpg'
export default {
    name:'GoodsItem',
  props:{
    goodsItem: null
  },
  data(){
    return {
        images:[]
    }
  },
  mounted(){
    // 模拟加载图片
    setTimeout(()=>{
      this.images.push(img0, img1, img2);
    },20)
    setTimeout(()=>{
      this.images.push(img3, img4);
    },50)
  },
  methods:{
    // 图片加载完触发
    imageLoad(){
      this.$bus.$emit('imageLoad');
    },
    // 跳转至详情页
    goDetail(){
      this.$router.push('/detail/' + this.goodsItem.xid)
    }
  }
}
</script>
<style lang="less" scoped>
.goods-item{
  position: relative;
  width: 48%;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  overflow: hidden;
  padding-bottom: 40px;
  img{
    width: 100%;
    vertical-align: middle;
  }
  .info{
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 12px;
    line-height: 20px;
    .title{
      font-size: 12px;
    }
    .desc{
      .price{
        font-size: 5px;
        color: rgb(216, 22, 22);
        em{
          position: relative;
          left: -2px;
          font-style: normal;
          font-size: 14px;
        }
      }
      .sel{
        color: #aaa;
        font-size: 5px;
        padding-left: 3px;
    }
    }
  }
}
</style>